<template>
  <div class="wrap clearfix">
    <div class="location">
      当前位置：首页<span>&gt;</span><b class="red">购物车</b>
    </div>

    <MyTable
      :renderData="list"
      :ckAll="ckAll"
      :computAddPrice="computAddPrice"
      :goodsCount="goodsCount"
      :preGoodsPrice="preGoodsPrice"
      :goodsPrice="goodsPrice"
      :goodsCountPrice="goodsCountPrice"
      :discountsPrice="discountsPrice"
      @allChecked="allChecked"
      @addPrice="addPrice"
      @minusPrice="minusPrice"
      @btnDel="btnDel"
      @btnDelAll="btnDelAll"
    >
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'

export default {
  components: {
    MyTable,
  },

  data() {
    return {
      list: [
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 0,
          oldPrice: 158.0,
          price: 129.0,
          count: 0,
          img: 'https://img1.baidu.com/it/u=457323991,477736074&fm=253&fmt=auto&app=138&f=JPEG?w=485&h=500',
          isSelected: true,
        },
        {
          name: '凌美Lamy Safari钢笔/签字笔T52黑色墨水<',
          id: 1,
          oldPrice: 158.0,
          price: 145.0,
          count: 0,
          img: 'https://img2.baidu.com/it/u=4016890413,495873028&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500',
          isSelected: false,
        },
        {
          name: '德国进口 凌美(LAMY)签字笔钢笔墨水水笔专用一次性墨水胆笔芯5支一盒T10德国进口',
          id: 2,
          oldPrice: 158.0,
          price: 130.0,
          count: 0,
          img: 'http://t13.baidu.com/it/u=3395457623,506859601&fm=224&app=112&f=JPEG?w=500&h=500',
          isSelected: true,
        },
      ],
    }
  },

  methods: {
    // 全选按钮
    allChecked(id) {
      this.list.forEach((item) => {
        return (item.isSelected = id)
      })
    },

    //删除功能
    btnDel(id) {
      // console.log(id);
      this.list = this.list.filter((item) => {
        return item.id !== id
      })
    },

    // 删除选中的
    btnDelAll() {
      this.list = this.list.filter((item) => {
        return item.isSelected !== true
      })
    },

    //添加
    addPrice(id) {
      const res = this.list.find((item) => item.id === id)
      res.count++
    },
    // 减少
    minusPrice(id) {
      const res = this.list.find((item) => item.id === id)
      if (res.count > 0) {
        res.count--
      }
    },
  },

  computed: {
    // 计算单个总价
    computAddPrice() {
      return this.list.reduce((prve, item) => prve + item.price * item.count, 0)
    },

    // 选中商品的数量
    goodsCount() {
      return this.list.filter((item) => item.isSelected)
    },

   // 所有商品的总价  优惠前
    preGoodsPrice() {
      return this.goodsCount.reduce(
        (prve, item) => prve + item.oldPrice * item.count,
        0
      )
    },

    // 所有商品的总价
    goodsPrice() {
      return this.goodsCount.reduce(
        (prve, item) => prve + item.price * item.count,
        0
      )
    },

    //选中商品数量
    goodsCountPrice() {
      return this.goodsCount.reduce((prve, item) => prve + item.count, 0)
    },

    //优惠价格
    discountsPrice() {
      return this.goodsCount.reduce(
        (prve, item) => prve + (item.oldPrice - item.price) * item.count,
        0
      )
    },
    //全选
    ckAll() {
      if (this.list.length === 0) {
        return false
      } else {
        return this.list.every((item) => item.isSelected)
      }
    },
  },
}
</script>

<style>
/* 公共样式 */
.clearfix {
  content: '';
  display: block;
  clear: both;
}

.red {
  color: #f30213;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

/* 清除默认样式 */
* {
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

a {
  text-decoration: none;
  color: #333;
}

input {
  outline: none;
}

.wrap {
  width: 1180px;
  margin: 0 auto;
}

.wrap .location {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.cartTable {
  border: 1px solid #ccc;
}

.cartTable tr.title {
  background-color: rgb(241, 243, 244);
  font-weight: bold;
}

.cartTable tbody tr td {
  /* border: 1px solid rgb(245, 245, 245); */
  padding: 10px;
}

/* 原价 */
.cartTable tbody tr td .tdl {
  text-decoration: line-through;
  color: #999;
}

/* 商品数量 */
.cartTable tr .amount .unum {
  width: 70px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  float: left;
}

/* 数量加减按钮 */
.cartTable tr .amount a {
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 18px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.cartTable tr .amount a.Increase {
  border-right: none;
  float: left;
}

.cartTable tr .amount a.Reduce {
  border-left: none;
  float: left;
}

.cartTable tr.count .jiesuan .right {
  text-align: right;
}

.cartTable tr.count .jiesuan .right p {
  margin: 5px 0;
}

.cartTable tr.count .jiesuan .right .pay {
  display: block;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background-color: #f30213;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
</style>
